<template>
  <u-modal
    v-model="driverModalVisible"
    :show-confirm-button="false"
    :show-cancel-button="false"
    :show-title="false"
    width="638"
    border-radius="4"
  >
    <div class="driver-modal-title">
      行程信息
      <image
        class="close-btn"
        mode="aspectFit"
        src="../../static/images_qccx/modal_close.png"
        @click="() => driverModalVisible = false"
      />
    </div>
    <u-line color="#EBEDF0FF" margin="0" />
    <div class="driver-modal-content">
      <cell label="城市" :value="orderInfo.cityName" />
      <cell label="车型" :value="orderInfo.groupName" />
      <cell label="产品名称" :value="orderInfo.productTypeName" />
      <cell label="预计用车时间">
        <p>
          {{ orderInfo.expectStartTime || "-" }} 至
          {{ !orderInfo.expectEndTime ? "-" : "" }}
        </p>
        <p v-if="orderInfo.expectEndTime">
          {{ orderInfo.expectEndTime || "-" }}
        </p>
      </cell>
      <cell label="起点站" :value="orderInfo.startAddress" />
      <template
        v-if="
          orderInfo.expectWaypointList &&
          orderInfo.expectWaypointList.length > 0
        "
      >
        <cell
          :label="
            orderInfo.expectWaypointList.length > 1
              ? `中途停靠${index + 1}`
              : `中途停靠`
          "
          :value="way.expectWaypoint"
          v-for="(way, index) in orderInfo.expectWaypointList"
          :key="index"
        />
      </template>
      <cell label="终点站" :value="orderInfo.endAddress" />
    </div>
  </u-modal>
</template>
<script>
import cell from "./cell.vue";
export default {
  props: {
    orderInfo: Object,
  },
  data() {
    return {
      driverModalVisible: false,
    };
  },
  components: {
    cell,
  },
  methods: {
    show() {
      this.driverModalVisible = true
    }
  },
};
</script>
<style lang="less" scoped>
.driver-modal-title {
  height: 96rpx;
  line-height: 96rpx;
  text-align: center;
  position: relative;
  font-weight: 600;
  font-size: 32rpx;
  color: #1a1a1a;
  .close-btn {
    width: 48rpx;
    height: 48rpx;
    position: absolute;
    right: 24rpx;
    top: 24rpx;
  }
}
.driver-modal-content {
  padding: 32rpx 40rpx 40rpx;
}
</style>
